<!DOCTYPE html>
<html>
	<!--创建钱包2-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
			}
			.top{
				display: flex;
				align-items: flex-end;
				height: 60px;
				padding-bottom: 10px;
				background: #3573FA;
			}
			.top>span{
				flex: 1 1 0;
			}
			.top>span:nth-of-type(1){
				text-indent: 15px;
			}
			.top>span:nth-of-type(2){
				font-size: 17px;
				text-align: center;
				color: white;
			}
			.top>span:nth-of-type(3){
				display: flex;
				justify-content: flex-end;
				padding-right: 15px;
				
			}
			.con{
				padding:20px 15px;
			}
			.con>.img{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25px;
				font-size: 14px;
				color: rgba(0,0,0,.6);
			}
			.con>.input{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 20px;
				padding:10px 6px;
				margin-bottom:15px;
				border: 1px solid #eee;
				opacity: .6;
			}
			.con>.input>input{
				flex:1 1 0;
				padding-right:10px;
			}
			.con>.input>img{
				flex:0 0 20px;
			}
			.ser-money{
				display: flex;
				align-items: center;
				margin-bottom: 15px;
			}
			.ser-money>img{
				flex:0 0 15px;
			}
			.ser-money>span:first-of-type{
				flex:1 1 0;
				padding-left:10px ;
				opacity: .5;
			}
			.ser-money>span:last-of-type{
				flex:0 0 35px;
				height: 15px;
				text-align: center;
				line-height: 15px;
				border: 1px solid #eee;
				color: rgba(0,0,0,.3);
			}
			.next{
				width: 100%;
				height: 40px;
				margin-top: 40px;
				text-align: center;
				line-height: 40px;
				background: #3573FA;
				border: none;
				outline: none;
				color: white;
			}
			
			#mask,#mask-par{
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 1;
			}
			#mask{
				background: rgba(0,0,0,.5);
			}
			#mask-par>.mask-shar{
				position: absolute;
				bottom: 0;
				z-index: 2;
				width: 100%;
				height: 400px;
				background: white;
			}
			#mask-par>.mask-shar>h1{
				padding: 20px 0 10px;
				text-align: center;
				font-size: 17px;
			}
			#mask-par>.mask-shar>p{
				display: flex;
				padding: 15px 30px;
				font-size: 15px;
				opacity: .7;
			}
			#mask-par>.mask-shar>p>span:first-of-type{
				flex: 0 0 100px;
			}
			#mask-par>.mask-shar>p>span:last-of-type{
				flex: 1 1 0;
			}
			#mask-par>.mask-shar>div{
				padding: 0px 30px;
			}
			#mask-par>.mask-shar>div>input{
				display: block;
				width: 90%;
				height: 14px;
				margin-top: 10px;
				padding: 8px 5%;
				background: #eee;
				border-radius: 20px;
			}
			#mask-par>.mask-shar>div>button{
				width: 100%;
				height: 30px;
				margin-top: 20px;
				background: #3573FA;
				border: none;
				outline: none;
				border-radius: 20px;
				color: white;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			
			<!--共工遮罩层-->
			<transition
				enter-active-class='animated fadeIn'	
				leave-active-class='animated fadeOut'
			>
				<div id="mask" v-if='opInfo'></div>
			</transition>
			
			<!--共工遮罩层-->
				
			<!--活动规则-->
			<transition
				enter-active-class='animated bounceInUp'	
				leave-active-class='animated bounceOutDown'
			>
				<div id="mask-par" v-if='opInfo' @click='opInfo=false'>
					<div class="mask-shar" @click.stop=''>
						<h1>转出详情</h1>
						<p>
							<span>顶单类型</span>
							<span>转账</span>
						</p>
						<p>
							<span>接受地址</span>
							<span>12354545414545</span>
						</p>
						<p>
							<span>付款钱包</span>
							<span>微信name的钱包</span>
						</p>
						<p>
							<span>金额</span>
							<span style='color:#3573FA'>1000ETH</span>
						</p>
						<p>
							<span>手续费</span>
							<span style='color:#F4777D'>1 ETH</span>
						</p>
						<div>
							<input type="password" placeholder="请输入交易密码" />
							<button @click='sure'>确认修改</button>
						</div>
						
					</div>
				</div>
			</transition>
			<!--活动规则-->
			
			<div class="top">
				<span @click='plus.webview.currentWebview().close()'>
					<img src="skin/img/icon-back.png" width="12px" height="20px"/>
				</span>
				<span>发送</span>
				<span>
					<img src="skin/img/icon-qr.png" width='22px' height="22px"/>
				</span>
			</div>
			<div class='con'>
				<p class='img'>
					<span>微信name的钱包</span>
					<span>
						<img src="skin/img/logo2.png" width="30px" height="30px"/>
					</span>
				</p>
				<p class='input'>
					<input type="text" placeholder="对方钱包地址" />
					<img src="skin/img/qr.png" width="20px" height="20px"/>
				</p>
				<p class='input'>
					<input type="text" placeholder="填写转出数量" />
				</p>
				<p class='ser-money'> 
					<img src="skin/img/import.png" width="15px" height="15px"/>
					<span>手续费：3.2145BTC</span>
					<span>MAX</span>
				</p>
				<p class='input'>
					<input type="text" placeholder="备注" />
				</p>
				<button class='next' @click='next'>备注</button>
			</div>
		</div>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					opInfo:false,//控制转出详情遮罩层
				},
				mounted:function(){
					setTimeout(function(){
						$('.open-text').click(function(){
							if($(this).attr('off')!='open'){
								$(this).css('height','11px');
								$(this).attr('off','open');
							}else{
								$(this).css('height','auto');
								$(this).attr('off','0')
							}
						});
					},500);
				},
				methods:{
					next:function(){
						this.opInfo=true;
					},
					sure:function(){
						this.opInfo=false;
						
					}
				}
			});
		</script>
	</body>
</html>


